<template>
    <h2>显示物资采购</h2>
    <p>
        货物名称：
        <el-input v-model="info.sPCargoName" style="width: 240px" placeholder="货物名称" />
        材质：
        <el-select v-model="info.sPMateriaLquality" clearable placeholder="Select" style="width: 240px">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in MateriaLquality" :key="item.mmteriaLqualityID" :label="item.materiaLqualityName"
                :value="item.mmteriaLqualityID" />
        </el-select>
        产地——国家：
        <el-select v-model="info.sPNationID" clearable placeholder="Select" style="width: 240px"
            @change="Provincelist()">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in Nation" :key="item.nationID" :label="item.nationName" :value="item.nationID" />
        </el-select>
        产地——省：
        <el-select v-model="info.sPProvinceID" clearable placeholder="Select" style="width: 240px">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in Provincel" :key="item.provinceID" :label="item.provinceName"
                :value="item.provinceID" />
        </el-select>
        申请人：
        <el-input v-model="info.createName" style="width: 240px" placeholder="创建人" />
        审批状态：
        <el-select v-model="info.sPApprovalStatus" clearable placeholder="Select" style="width: 240px">
            <el-option :value="0" label="请选择" />
            <el-option :value="1" label="待提交" />
            <el-option :value="10" label="待审批" />
            <el-option :value="20" label="已通过" />
            <el-option :value="30" label="已拒绝" />
        </el-select>
        <el-button type="primary" @click="SuppliesPurchasingList()">查询</el-button>
        <el-button @click="chengzhi()">重置</el-button>
    </p>
    <P>
        <el-button type="primary" @click="router.push('/AddPurchasing')">新增</el-button>&nbsp;&nbsp;
        <el-button type="primary" @click="plspDate()">删除</el-button>
    </P>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="sPCargoName" label="货物名称" />
        <el-table-column prop="sPTypeID" label="类型">
            <template v-slot="script">
                {{ script.row.typeName }}
            </template>
        </el-table-column>
        <el-table-column prop="sPMateriaLquality" label="材质">
            <template v-slot="script">
                {{ script.row.materiaLqualityName }}
            </template>
        </el-table-column>
        <el-table-column prop="sPGaugeLattice" label="规格" />
        <el-table-column prop="date" label="产地">
            <template v-slot="script">
                {{ script.row.nationName }}-{{ script.row.provinceName }}
            </template>
        </el-table-column>
        <el-table-column prop="sPQuantity" label="数量" />
        <el-table-column prop="sPPurposeDescription" label="用途描述" />
        <el-table-column prop="createName" label="申请人" />
        <el-table-column prop="sPExpectedDeliveryDate" label="期望交付日期">
            <template v-slot="script">
                {{ script.row.sPExpectedDeliveryDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="sPReserveNote" label="备注" />
        <el-table-column prop="createDate" label="创建时间">
            <template v-slot="script">
                {{ script.row.createDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="sPApprovalStatus" label="审批状态">
            <template v-slot="script">
                <span v-if="script.row.sPApprovalStatus == 1">待提交</span>
                <span v-if="script.row.sPApprovalStatus == 10">待审批</span>
                <span v-if="script.row.sPApprovalStatus == 20">已通过</span>
                <span v-if="script.row.sPApprovalStatus == 30">已拒绝</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="审批人">
            <template v-slot="script">
                <span v-if="script.row.sPApprover == 'string' || script.row.sPApprover == null">-</span>
                <span v-else>{{ script.row.sPApprover }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="200">
            <template v-slot="script">
                <el-button type="primary" v-if="script.row.sPApprovalStatus == 1 || script.row.sPApprovalStatus == 30"
                    @click="router.push('/UpdPurchasing?id=' + script.row.sPCargoID)"
                    style="width: 20px;">编辑</el-button>&nbsp;
                <el-button type="primary" @click="spDate(script.row.sPCargoID)"
                    style="width: 20px;">删除</el-button>&nbsp;
                <el-button type="primary" @click="router.push('/PurchasingInfo?id=' + script.row.sPCargoID)"
                    style="width: 20px;">查看</el-button>&nbsp;
                <el-button type="primary" v-if="script.row.sPApprovalStatus == 30"
                    @click="spupdate(script.row.sPCargoID, 10)" style="width: 50px;">重新提交</el-button>&nbsp;
                <el-button type="primary" v-if="script.row.sPApprovalStatus == 1"
                    @click="spupdate(script.row.sPCargoID, 10)" style="width: 50px;">提交审批</el-button>&nbsp;
            </template>
        </el-table-column>
    </el-table>
    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="total,slot, sizes"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            ,每页显示{{ page.pageSzen }},共{{ page.pageiden }}/{{ page.pageCount }}页
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot, prev, pager, next"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == 1" @click="page.pageiden = 1">首页</button>
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot,jumper"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == page.pageCount"
                                @click="page.pageiden = page.pageCount">尾页</button>
                        </template>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang='ts'>
import { reactive, ref, onMounted, watch } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

//显示列表
const tableData = ref([])
//多选
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
//生命函数钩
onMounted(() => {
    //物资采购显示
    SuppliesPurchasingList();
    //显示材 质
    MateriaLqualitylist();
    //显示产 地：国家
    Nationlist();
})
//条件
const info = reactive({
    sPCargoName: "",//货物名称
    sPMateriaLquality: 0,//材 质
    sPNationID: 0,//产 地：国家
    sPProvinceID: 0,//产 地：省
    createName: "",//创建人
    sPApprovalStatus: 0//审批状态
})
//条件重置
const chengzhi = () => {
    info.sPCargoName = "";//货物名称
    info.sPMateriaLquality = 0;//材 质
    info.sPNationID = 0;//产 地：国家
    info.sPProvinceID = 0;//产 地：省
    info.createName = "";//创建人
    info.sPApprovalStatus = 0;//审批状态
    page.pageiden = 1;//页码
    page.pageSzen = 3;//页容量
    SuppliesPurchasingList()
}
//分页
const page = reactive({
    pageiden: 1,//页码
    pageSzen: 3,//页容量
    totaCount: 0,//总数据
    pageCount: 0//总页码
})
//执行分页
watch(page, () => {
    SuppliesPurchasingList()
})
//显示材 质
const MateriaLquality = ref([])
const MateriaLqualitylist = () => {
    axios.get("MaterialRead/api/Public/MateriaLqualitylist").then(res => {
        MateriaLquality.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：国家
const Nation = ref([])
const Nationlist = () => {
    axios.get("MaterialRead/api/Public/Nationlist").then(res => {
        Nation.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：省
const Provincel = ref([])
const Provincelist = () => {
    axios.get("MaterialRead/api/Public/Provincelist?nationID=" + info.sPNationID).then(res => {
        Provincel.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}

//物资采购显示
const SuppliesPurchasingList = () => {
    axios.get("MaterialRead/api/SuppliesPurchasing/SuppliesPurchasingList", {
        params: {
            pageiden: page.pageiden,
            pageSzen: page.pageSzen,
            sPCargoName: info.sPCargoName,
            sPMateriaLquality: info.sPMateriaLquality,
            sPNationID: info.sPNationID,
            sPProvinceID: info.sPProvinceID,
            createName: info.createName,
            sPApprovalStatus: info.sPApprovalStatus,
        }
    }).then(res => {
        page.totaCount = res.data.data.totaCount;
        page.pageCount = res.data.data.pageCount;
        tableData.value = res.data.data.values;
    }).catch(err => {
        console.log(err)
    })
}

//批量删除 
const plspDate = () => {
    ElMessageBox.confirm(
        '确认删除吗？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            if (multipleSelection.value.length < 1) {
                ElMessage.success("至少选择一项")
                return
            }
            let ids: any[] = []
            ids = multipleSelection.value.map(ele => ele.sPCargoID)
            axios.post("materialwrite/api/SuppliesPurchasing/DELSuppliesPurchasing", { ids }).then(res => {
                ElMessage.success("删除成功")
                SuppliesPurchasingList()
            }).catch(err => {
                ElMessage.success("删除失败")
            })
        })
        .catch(() => {

        })
}
//删除 
const spDate = (sPCargoID: number) => {
    ElMessageBox.confirm(
        '确认删除吗？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            let ids = [sPCargoID]
            axios.post("materialwrite/api/SuppliesPurchasing/DELSuppliesPurchasing", { ids }).then(res => {
                ElMessage.success("删除成功")
                SuppliesPurchasingList()
            }).catch(err => {
                ElMessage.success("删除失败")
            })
        })
        .catch(() => {

        })
}
//修改状态
const spupdate = (sPCargoID: number, sPApprovalStatus: number) => {
    axios.post("materialwrite/api/SuppliesPurchasing/UPdSApprovalStatus?sPCargoID=" + sPCargoID + "&sPApprovalStatus=" + sPApprovalStatus).then(res => {
        ElMessage.success("提交成功")
        SuppliesPurchasingList()
    }).catch(err => {
        ElMessage.success("提交失败")
    })
}
</script>

<style></style>